//1.初始化路由模块需要导入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'
import LoginIn from '@/components/LoginIn.vue'
import Main from '@/components/Main.vue'

//2.调用vue.use()函数把VueRouter安装为Vue的插件
Vue.use(VueRouter)

//3.创建路由实例对象
const router = new VueRouter({
    //routes是一个数组，作用：用来定义hash与router-view的对应关系
    routes: [
        { path: '/', redirect: '/home' }, //路由重定向,重新匹配路由规则
        /* ------------------------- */
        { path: '/home', component: Home }, //用component来指定组件
        /* ------------------------- */
        { path: '/movie:id', component: Movie, props: true }, //动态路由:使用冒号来定义动态路由 动态参数名可以任意起
        //  props:true   为当前路由开启props传参,开启后就可在组件内部的props属性内取得这个参数了
        /* ------------------------- */
        { //声明子级路由，嵌套声明子级路由规则
            path: '/about',
            component: About,
            // redirect: 'about/tab1', //重定向来显示子路由结构
            children: [
                //1.通过children属性嵌套声明子级路由规则
                { path: 'tab1', component: Tab1 }, //2.访问/about/tab1时展示 Tab1组件
                { path: 'tab2', component: Tab2 }, //子路由开头不要以斜线开头
                { path: '', component: Tab1 } //如果children数组中 某条规则的path为空字符串，那么这条路由规则叫做默认子路由
            ]
        },
        { path: '/loginIn', component: LoginIn },
        { path: '/main', component: Main }
    ]
});


/* !!!全局前置路由守卫： */
//只要发生路由跳转就会触发beforeEach()
router.beforeEach(function(to, from, next) {
    //全局前置守卫方法的三个形参
    //to是将要访问的路由的信息对象
    //from是将要离开的路由信息对象
    //next是一个函数，调用next()表示放行！允许这次路由导航
    // next(); //如果不调用next()那么将展示不了任何组件！！
    console.log(to);
    console.log(from);

    /* ！！！next()的三中调用方式 */
    //1.next()直接放行
    //2.next('/home')跳转到home
    //3.next(false)强制停留在当前页面

    //导航守卫
    //拿到将要访问的hash地址=> /main  ?  证明登陆后放行  :   直接next()
    //证明登录：读取localStorage中的token值   有token   ?  放行next()   :  跳转loginIn
    if (to.path === '/main') {
        const token = localStorage.getItem('token')
        if (token) {
            next()
        } else {
            next('/loginIn')
        }
    } else {
        next()
    }
});
//4.向外共享路由实例
export default router